<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>JQuery_选项卡的制作</title>
	<script src="js/jquery-1.8.0.min.js"></script>
	<script>
		$(document).ready(function(){
			$(".hover .ct:gt(0), .click .ct:gt(0)").hide();

			//鼠标放上去，选项卡发生变化
			var hover_hdw=$(".hover .box ul li");
			hover_hdw.mouseover(function(){
				$(this).addClass("one").siblings().removeClass();

				var hdw_index=hover_hdw.index(this);
				$(this).parents('.hover').find(".ct").eq(hdw_index).show().siblings().hide();
			});
			
			//点击鼠标时，选项卡发生变化
			var click_hdw=$(".click .box ul li");
			click_hdw.click(function(){
				$(this).addClass("one").siblings().removeClass();

				var hdw_index=click_hdw.index(this);
				$(this).parents('.click').find(".ct").eq(hdw_index).show().siblings().hide();
			});
		});
	</script>
	<style>
		* {
			margin: 0;
			padding-top:0;
		}
		body {
			font-size: 14px;
			padding: 100px;
		}
		ul {
			list-style-type: none;
			padding-left:0px; 
		}
		.hover , .click {
			margin-bottom: 50px;
		}
		.box ul {
			min-height: 30px;
			line-height: 30px;
		}
		.box ul li {
			position: relative;
			top: 1px;
			float: left;
			margin-right: 10px;
			padding-left: 10px;
			background: url(images/bg.png) no-repeat left top;
		}
		.box ul li span {
			display: block;
			padding-right: 10px;
			background: url(images/bg.png) no-repeat right top;
		}
		.content {
			width: 325px;
			height: 80px;
			border:1px solid #a1afb9;
			line-height: 1.5;
		}
		.box ul li.one {
			cursor: pointer;
			background: url(images/bg_1.png) no-repeat left top;
		}
		.box ul li.one span {
			background: url(images/bg_1.png) no-repeat right top;
		}
		.box ul li.two {
			background: pink;
		}
	</style>
</head>
<body>
	<div class="hover">
		<div class="box">
			<ul>
				<li class="one"><span>菜单一</span></li>
				<li><span>菜单二</span></li>
				<li><span>菜单三</span></li>
			</ul>
		</div>
		<div class="content">
			<div class="ct">菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容</div>
			<div class="ct">菜单二的内容菜单二的内容菜单二的内容菜单二的内容菜单二的内容菜单二的内容菜单二的内容</div>
			<div class="ct">菜单三的内容菜单三的内容菜单三的内容菜单三的内容菜单三的内容菜单三的内容菜单三的内容菜单三的内容菜单三的内容</div>
		</div>
	</div>

	<div class="click">
		<div class="box">
			<ul>
				<li class="one"><span>菜单一</span></li>
				<li><span>菜单二</span></li>
				<li><span>菜单三</span></li>
			</ul>
		</div>
		<div class="content">
			<div class="ct">菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容菜单一的内容</div>
			<div class="ct">菜单二的内容菜单二的内容菜单二的内容菜单二的内容菜单二的内容菜单二的内容菜单二的内容</div>
			<div class="ct">菜单三的内容菜单三的内容菜单三的内容菜单三的内容菜单三的内容菜单三的内容菜单三的内容菜单三的内容菜单三的内容</div>
		</div>
	</div>
</body>
</html>